<template>
  <div class="banner">
    <img v-for="(v,i) in images" :key="i" :src="v" v-show="index == i" />
    <ul>
      <li v-for="(v,i) in images" :key="i" :class="index == i ? 'select' : ''"></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "banner",

  data() {
    return {
      timer: null,
      index: 0,
      images: [
        require("../assets/images/Timao:mianmo.png"),
        require("../assets/images/Timao:jiushui.png"),
        require("../assets/images/Timao:hufu.png"),
        require("../assets/images/Timao:erji.png")
      ]
    };
  },

  methods: {
    play() {
      this.timer = setInterval(() => {
        this.autoPlay();
      }, 2000);
    },
    autoPlay() {
      this.index++;
      if (this.index == this.images.length) {
        this.index = 0;
      }
    }
  },

  mounted: function() {
    //  挂载完成(也就是页面一刷新完成)
    this.play();
  },

  destroyed() {
    //  销毁
    clearInterval(timer);
  }
};
</script>

<style lang="scss" scoped>
.banner {
  position: relative;
  img {
    min-width: 347px;
    min-height: 147px;
    max-width: 90%;
    display: block;
    margin: 5px auto;
  }
  ul {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    margin: 0 auto;
    li {
      float: left;
      width: 10px;
      height: 2px;
      margin: 2px 8px;
      border: 1px solid #fff;
      border-radius: 50%;
      background-color: #fff;
      opacity: 0.2;
      &.select {
        background-color: #fff;
        opacity: 1;
      }
    }
  }
}
</style>